<template>
	<view class="housePage">
		<view class="container">
			<view class="section_1">
				<view class="list">
					<view class="list-item">
						<view class="text active">时间</view>
						<view class="icon-box">
							<image class="arrow-top" src="/static/icon_arrowTop_02.png" mode="aspectFill"></image>
							<image class="arrow-drown" src="/static/icon_arrowTop_01.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list-item">
						<view class="text">面积</view>
						<view class="icon-box">
							<image class="arrow-top" src="/static/icon_arrowTop_02.png" mode="aspectFill"></image>
							<image class="arrow-drown" src="/static/icon_arrowTop_02.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list-item">
						<view class="text">租金</view>
						<view class="icon-box">
							<image class="arrow-top" src="/static/icon_arrowTop_02.png" mode="aspectFill"></image>
							<image class="arrow-drown" src="/static/icon_arrowTop_02.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list-item" @click="toShowFilter">
						<view class="text">筛选</view>
						<view class="icon-box">
							<image class="fillter" src="/static/icon_fillter_01.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="popup-warp" v-if="showFilter">
					<view class="container">

						<view class="form">
							<view class="label-box">
								<text class="text_1">租金区间</text>
								<text class="text_2">(元/月)</text>
							</view>
							<view class="slider-box">
								<view class="range">
									<view class="text_1">0</view>
									<view class="text_2"><text>0&nbsp;-&nbsp;{{rentValue}}</text>
									</view>
									<view class="text_3">10k以上</view>
								</view>
								<u-slider v-model="rentValue" max="10000" step="100"></u-slider>
								<!-- <MySilder max="{{10000}}" min="{{0}}" bind:lowValueChange="lowValueChange"
									bind:heighValueChange="heightValueChange" data-lowkey="search.monthly_rent_start"
									data-heightkey="search.monthly_rent_end"></MySilder> -->

							</view>
						</view>

						<view class="form">
							<view class="label-box">
								<text class="text_1">面积区间</text>
								<text class="text_2">(㎡)</text>
							</view>
							<view class="slider-box">
								<view class="range">
									<view class="text_1">0</view>
									<view class="text_2"><text>0&nbsp;-&nbsp;{{areaValue}}</text>
									</view>
									<view class="text_3">200以上</view>
								</view>
								<u-slider v-model="areaValue" max="200" step="10"></u-slider>
								<!-- <MySilder max="{{200}}" min="{{0}}" bind:lowValueChange="lowValueChange"
									bind:heighValueChange="heightValueChange" data-lowkey="search.area_start"
									data-heightkey="search.area_end"></MySilder> -->

							</view>
						</view>
						<view class="btn">
							<image class="search" src="/static/icon_search_01.png" mode="aspectFill"></image>
							<view class="text">搜索</view>
						</view>
					</view>
					<view class="mask" @click="closeFilter"></view>
				</view>
			</view>
			<view class="section_2">
				<view class="list">
					<view class="list-item">
						<HouseItem></HouseItem>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import HouseItem from '@/components/HouseItem.vue'
	export default {
		components: {
			HouseItem
		},
		data() {
			return {
				showFilter: false,
				areaValue: 0,
				rentValue: 0
			}
		},
		onShow() {
			this.showFilter = false
		},
		methods: {
			toShowFilter() {
				this.showFilter = !this.showFilter
			},
			closeFilter() {
				this.showFilter = false
			}
		}
	}
</script>

<style>
	.housePage {
		width: 100%;
	}

	.page-hidden {
		height: 100vh;
		overflow: hidden;
	}

	.housePage .container {
		width: 100%;
	}

	.housePage .container .section_1 {
		width: 100%;
		background-color: #fff;
		position: sticky;
	}

	.housePage .container .section_1 .dropMenu {
		position: relative;
	}

	.housePage .container .section_1 .list {
		width: 100%;
		height: 80rpx;
		display: flex;
		background-color: #fff;
		align-items: center;
	}

	.housePage .container .section_1 .list .list-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.housePage .container .section_1 .list .list-item .text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333444;
		margin-right: 4rpx;
	}

	.housePage .container .section_1 .list .list-item .text.active {
		color: #2489FF;
	}

	.housePage .container .section_1 .list .list-item .icon-box .arrow-top,
	.housePage .container .section_1 .list .list-item .icon-box .arrow-drown {
		width: 16rpx;
		height: 12rpx;
	}

	.housePage .container .section_1 .list .list-item .icon-box .arrow-drown {
		transform: rotate(180deg);
	}

	.housePage .container .section_1 .list .list-item .icon-box .fillter {
		width: 22rpx;
		height: 22rpx;
	}

	.housePage .container .section_2 {
		width: 100%;
	}

	.housePage .container .section_2 .list {
		width: 100%;
		padding: 28rpx 0;
	}

	.housePage .container .section_2 .list .list-item {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
	}

	.popup-warp {
		position: fixed;
		width: 100%;
		height: 100vh;
		z-index: 99;
		/* z-index: 99; */
		/* overflow: hidden; */
	}

	.popup-warp .mask {
		background: rgba(0, 0, 0, 0.5);
		position: absolute;
		/* height: 100vh; */
		height: 100%;
		width: 100%;
		z-index: 99;
	}

	.popup-warp .container {
		/* position: absolute; */
		width: 100%;
		height: 656rpx;
		background: #FFFFFF;
		padding: 36rpx 32rpx;
		z-index: 99;
	}

	.popup-warp .container .form {
		width: 100%;
		margin-bottom: 60rpx;
	}

	.popup-warp .container .form .label-box {
		margin-bottom: 20rpx;
	}

	.popup-warp .container .form .label-box .text_1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333444;
		opacity: 1;
		margin-right: 16rpx;
	}

	.popup-warp .container .form .label-box .text_2 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #B8BBC1;
		opacity: 1;
	}

	.popup-warp .container .form .slider-box {
		width: 100%;
		z-index: 99;
	}

	.popup-warp .container .form .slider-box .range {
		width: 100%;
		margin-bottom: 28rpx;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.popup-warp .container .form .slider-box .range .text_1,
	.popup-warp .container .form .slider-box .range .text_3 {
		text-align: left;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888999;
	}

	.popup-warp .container .form .slider-box .range .text_2 {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2489FF;
		text-align: center;
	}

	.popup-warp .container .form .slider-box .slider {
		position: relative;
		width: 100%;
		height: 44rpx;
	}

	.popup-warp .container .form .slider-box .slider .left,
	.popup-warp .container .form .slider-box .slider .right {
		position: absolute;
		width: 44rpx;
		height: 44rpx;
		z-index: 1;
	}

	.popup-warp .container .form .slider-box .slider .right {
		right: 0;
	}

	.popup-warp .container .form .slider-box .slider .left-line,
	.popup-warp .container .form .slider-box .slider .right-line {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 0;
		height: 8rpx;
		background: rgba(241, 242, 245, 1);
		border-top-left-radius: 6rpx;
		border-bottom-left-radius: 6rpx;
		z-index: 1;
	}

	.popup-warp .container .form .slider-box .slider .right-line {
		right: 0;
	}

	.popup-warp .container .form .slider-box .slider .line {
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		width: 100%;
		height: 8rpx;
		background: rgba(36, 137, 255, 1);
		border-radius: 6rpx;
	}

	.popup-warp .container .btn {
		width: 686rpx;
		height: 88rpx;
		background: #2489FF;
		opacity: 1;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-warp .container .btn .search {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.popup-warp .container .btn .text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F7F7F8;
		opacity: 1;
	}
</style>
